<template>
	<view class="container">
		<view class="navbar">
			<u-navbar :placeholder="true" title="小程序备案材料" :autoBack="false">
				<view slot="left">
					<view class="home" @click="onToBack">
						<u-icon name="arrow-left" color="#303133" size="21"></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<image class="img" mode="widthFix" :src="imageUrl" :style="{ height: imgHeight + 'px' }" @load="onImgLoad" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: 'https://img.alicdn.com/imgextra/i1/2064565174/O1CN01zx6AeB1o5k7YY70Jh_!!2064565174.png',
				imgHeight: 0,
			};
		},
		methods: {
			onToBack() {
				uni.navigateBack()
			},
			onImgLoad(e) {
				// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
				const {
					width,
					height
				} = e.mp.detail;
				this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
			},
		},
	};
</script>

<style>
	.u-navbar__content__title {
		color: #313033 !important;
	}


	.u-status-bar,
	.u-navbar__content {
		background-color: rgba(255, 255, 255, 0) !important;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img {
		width: 100%;
	}
</style>